<template>
  <div class="app-container">
    <div class="contentDiv">
      <el-table v-loading="listLoading" :data="tableData" border size="small" :expand-row-keys="keys" fit highlight-current-row row-key="id" :indent="30" style="width: 100%;">
        <el-empty slot="empty" :image-size="120" description="暂无数据" />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="权限代码" prop="menuCode" />
        <el-table-column label="权限名称" prop="menuName" />
        <el-table-column label="财务/分销" prop="rootCode">
          <template slot-scope="{row}">
            <span>{{ row.rootCode === 'G' ? '财务': row.rootCode === 'I' ? '分销' : row.rootCode === 'GI' ? '财务、分销' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="节点类型" prop="menuType">
          <template slot-scope="{row}">
            <span>{{ row.menuType === 0 ? '目录': row.menuType === 1 ? '菜单' : row.menuType === 2 ? '按钮' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="name" prop="name" />
        <el-table-column label="component" prop="component" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { getFuncsTree, saveFuncsTree } from '@/api/user'
import { asyncRoutes } from '@/router'
export default {
  name: 'UserFunc',
  data() {
    return {
      tableKey: 0,
      tableData: [],
      list: [],
      keys: [],
      routes: asyncRoutes,
      listLoading: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    sessionStorage.removeItem('roleInfo')
    this.getData()
  },
  methods: {
    showDetail(obj) {
      sessionStorage.roleInfo = JSON.stringify(obj)
      this.$message.warning('暂无开发')
    },
    getCheckedNodes() {
      var permission = []
      var roles = this.$refs.tree.getCheckedNodes()
      for (var i = 0; i < roles.length; i++) {
        permission.push(roles[i].id)
      }
      return permission
    },
    async getData() {
      this.listLoading = true
      const { data } = await getFuncsTree()
      this.tableData = data.data
      this.keys = [this.tableData[0].id]
      this.listLoading = false
    },
    getNameBytitle(title, routes) {
      for (const it of routes) {
        if (it.meta && it.meta.title === title) {
          return it.name
        }
        if (it.children) {
          const res = this.getNameBytitle(title, it.children)
          if (res) {
            return res
          }
        }
      }
    },
    getPathBytitle(title, routes) {
      for (const it of routes) {
        if (it.meta && it.meta.title === title) {
          return it.path
        }
        if (it.children) {
          const res = this.getPathBytitle(title, it.children)
          if (res) {
            return res
          }
        }
      }
    },
    saveRow(row) {
      const obj = row
      // obj.name = this.getNameBytitle(row.menuName, this.routes)
      // console.log(obj.name)
      // obj.path = this.getPathBytitle(row.menuName, this.routes)
      // console.log(obj.path)
      saveFuncsTree(obj).then(res => {
        this.$message.success('参数保存成功')
      })
    }
  }
}
</script>
<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

input {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 8px;
  border: none;
}
/* input[disabled] {
  background: #f9f9f9;
}
>>> .tx-r input {
  text-align: right;
}
>>> .el-table .cell {
  padding: 0;
  height: 40px;
  line-height: 40px;
}
>>> .el-table td {
  padding: 0px;
} */

</style>
